<!DOCTYPE html>
<html lang="en">
<head>
    <!--NOTE: Most Web WorldWind examples use jquery, Bootstrap and requirejs but those technologies are NOT-->
    <!--required by Web WorldWind. See SimplestExample.html for an example of using Web WorldWind without them.-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"  type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script data-main="NDVIViewer/NDVIViewer" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>

    <style>
        table tr td:empty {
            width: 5px;
        }
        table tr th:empty {
            width: 5px;
        }

        /* tell the SVG path to be a thin blue line without any area fill */
        path {
            stroke: steelblue;
            stroke-width: 1;
            fill: none;
        }

        .axis {
            shape-rendering: crispEdges;
        }

        .x.axis line {
            stroke: lightgrey;
        }

        .x.axis .minor {
            stroke-opacity: .5;
        }

        .x.axis path {
            display: none;
        }

        .y.axis line, .y.axis path {
            fill: none;
            stroke: #000;
        }
    </style>

</head>
<body>

<div class="container">
    <div class="jumbotron hidden-xs">
        <h1 style="text-align:center">WorldWind NDVI Viewer</h1>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <h4>Projection</h4>
            <div class="dropdown" id="projectionDropdown">
            </div>
            <br>

            <h4>Layers</h4>
            <div class="list-group" id="layerList">
            </div>
            <br>
            <div id="surfacesStatus">
                <h4>NDVI</h4>
            </div>
            <h5>Select region</h5>
            <select id="select-region">
            </select>
            <h5>Change datasource date</h5>
            <div id="scene-slider" style="height:11px;width:200px"></div>
            <p>
                <label>Datasource date:</label>
                <input type="text" id="scene-date" readonly style="border:0; color:#f6931f; font-weight:bold;">
            </p>
            <h5>Change surface transparency</h5>
            <div id="transparency-slider" style="height:11px;width:200px"></div>
            <p>
                <label>Opacity:</label>
                <input type="text" id="transparency" readonly style="border:0; color:#f6931f; font-weight:bold;">
            </p>
            <div>
                <h4>NDVI legend</h4>
                <table>
                    <tr>
                        <td bgcolor="#B3EBFF"></td>
                        <td></td>
                        <td>0.0 &nbsp-&nbsp 25.5 </td>
                    </tr>

                    <tr>
                        <td bgcolor="#FFFFF0"></td>
                        <td></td>
                        <td>25.5 &nbsp-&nbsp 51.0</td>
                    </tr>

                    <tr>
                        <td bgcolor="#FFFFE5"></td>
                        <td></td>
                        <td>51.0 &nbsp-&nbsp 76.5 </td>
                    </tr>

                    <tr>
                        <td bgcolor="#F6FBB9"></td>
                        <td></td>
                        <td>76.5 &nbsp-&nbsp 102.0 </td>
                    </tr>

                    <tr>
                        <td bgcolor="D9F0A2"></td>
                        <td></td>
                        <td>102.0 &nbsp-&nbsp 127.5 </td>
                    </tr>

                    <tr>
                        <td bgcolor="#ACDD8E"></td>
                        <td></td>
                        <td>127.5 &nbsp-&nbsp 153.0</td>
                    </tr>

                    <tr>
                        <td bgcolor="#40AB5C"></td>
                        <td></td>
                        <td>153.0 &nbsp-&nbsp 178.5 </td>
                    </tr>

                    <tr>
                        <td bgcolor="#238342"></td>
                        <td></td>
                        <td>175.5 &nbsp-&nbsp 204.0 </td>
                    </tr>

                    <tr>
                        <td bgcolor="#005929"></td>
                        <td></td>
                        <td>204.0 &nbsp-&nbsp 229.5 </td>
                    </tr>

                    <tr>
                        <td bgcolor="#004529"></td>
                        <td></td>
                        <td>229.5 &nbsp-&nbsp 255.0</td>
                    </tr>
                </table>
            </div>
            <h4>Destination</h4>
            <div class="input-group" id="searchBox">
                <input type="text" class="form-control" placeholder="GoTo" id="searchText"/>
                <span class="input-group-btn">
                    <button id="searchButton" class="btn btn-primary" type="button">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>


        </div>

        <div class="col-sm-9" id="globe">
            <canvas id="canvasOne" width="1000" height="1000"
                    style="width: 100%; height: auto; background-color: black;">
                Your browser does not support HTML5 Canvas.
            </canvas>
        </div>

        <div id="graph" class="col-sm-9"></div>

    </div>
</div>




</body>
</html>